<template>
    <div class="f-header">
        <span class="logo">
            <img :src="logoUrl" alt="" style="width: 40px;margin: 0 10px">
            <span style="font-size: 15px">{{ systemName }}</span>
        </span>
        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <fold v-if="$store.state.asideWidth == '250px'"/>
            <Expand v-else/>
        </el-icon>
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="icon-btn" @click="handleRefresh"><refresh /></el-icon>
        </el-tooltip>

        <div class="ml-auto flex items-center">
            <el-tooltip effect="dark" content="全屏" placement="bottom">
                <el-icon class="icon-btn" @click="toggle">
                    <full-screen v-if="!isFullscreen"/>
                    <aim v-else/>
                </el-icon>
            </el-tooltip>

            <el-button size="small" @click="uploadApp(educationStu)">学员端</el-button>

            <el-dropdown class="dropdown" @command="handleCommand">
                <span class="flex items-center text-light-50">
                    <el-avatar class="mr-2" :size="25" :src="$store.state.user.avatar" />
                    {{ $store.state.user.username }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="uploadApp(uploadStuApp)">APP下载</el-dropdown-item>
                        <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>

    <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
            <el-form-item prop="password" label="旧密码">
                <el-input v-model="form.password" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item prop="newPass" label="新密码">
                <el-input type="password" v-model="form.newPass" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item prop="repassword" label="确认密码">
                <el-input type="password" v-model="form.repassword" placeholder="请输入确认密码" show-password></el-input>
            </el-form-item>
        </el-form>
    </form-drawer>

    <el-dialog v-model="dialogImportVisible" width="300px">
        <img :src='uploadAppUrl' >
    </el-dialog>
</template>

<script setup>
    import { ref, computed } from "vue"
    import FormDrawer from '~/components/FormDrawer.vue'
    import { useRepassword,useLogout } from "~/composables/useManager"
    import { useFullscreen } from '@vueuse/core'
    import educationStuImage from '~/assets/educationStu.png'
    import uploadStuAppImage from '~/assets/education.png'
    import defaultLogo from '~/assets/logo.png'
    import store from "~/store"

    const logoUrl = computed(() => {
        const configUrl = store.state.config?.url
        return configUrl && configUrl !== '' ? configUrl : defaultLogo
    })

    const systemName = computed(() => {
        const configName = store.state.config?.topName
        return configName && configName !== '' ? configName : "救护消防应急救援中心微课系统"
    })

    const educationStu = ref(educationStuImage)
    const uploadStuApp = ref(uploadStuAppImage)

    const dialogImportVisible = ref(false)
    const {
        // 是否全屏状态
        isFullscreen,
        // 切换全屏
        toggle
    } = useFullscreen()

    const {
        formDrawerRef,
        form,
        rules,
        formRef,
        onSubmit,
        openRePasswordForm
    } = useRepassword()

    const {
        handleLogout
    } = useLogout()

    const handleCommand = (c)=>{
        switch (c) {
            case "logout":
                handleLogout()
                break;
            case "rePassword":
                openRePasswordForm()
                break;
        }
    }

    // 刷新
    const handleRefresh = ()=>location.reload()

    const uploadAppUrl = ref('')
    const uploadApp = (url)=> {
        uploadAppUrl.value = url;
        dialogImportVisible.value = true;
    }
</script>
<style>
    .f-header{
        @apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
        height: 64px;
        z-index: 999;
    }

    .logo{
        width: 250px;
        @apply flex justify-center items-center text-xl font-thin;
    }

    .icon-btn{
        @apply flex justify-center items-center;
        width: 42px;
        height: 64px;
        cursor: pointer;
    }

    .icon-btn:hover{
        @apply bg-indigo-600;
    }

    .f-header .dropdown{
        height: 64px;
        cursor: pointer;
        @apply flex justify-center items-center mx-5;
    }
</style>
